import React, { useState } from "react";
import { Tabs, Typography, Space } from "antd";
import {
  InfoCircleOutlined,
  FileOutlined,
  BookOutlined,
  FormOutlined,
  MessageOutlined,
} from "@ant-design/icons";
import type { CourseInfo as CourseInfoType } from "../types";
import CourseInfoComponent from "./components/CourseInfo";
import CourseResources from "./components/CourseResources";
import CourseAssignments from "./components/CourseAssignments";
import CourseExams from "./components/CourseExams";
import CourseDiscussion from "./components/CourseDiscussion";

const { Title } = Typography;

const CourseDetail: React.FC = () => {
  const [loading] = useState(false);
  const [courseInfo] = useState<CourseInfoType>({
    id: "1",
    name: "高级Web开发",
    teacherName: "张三",
    semester: "2023-2024-2",
    schedule: "周一 1-2节",
    classroom: "A301",
    credit: 4,
    description: "学习现代Web开发技术和框架",
  });

  const items = [
    {
      key: "info",
      label: (
        <span>
          <InfoCircleOutlined /> 课程信息
        </span>
      ),
      children: (
        <CourseInfoComponent courseInfo={courseInfo} loading={loading} />
      ),
    },
    {
      key: "resources",
      label: (
        <span>
          <FileOutlined /> 课程资源
        </span>
      ),
      children: <CourseResources />,
    },
    {
      key: "assignments",
      label: (
        <span>
          <FormOutlined /> 作业
        </span>
      ),
      children: <CourseAssignments />,
    },
    {
      key: "exams",
      label: (
        <span>
          <BookOutlined /> 考试
        </span>
      ),
      children: <CourseExams />,
    },
    {
      key: "discussion",
      label: (
        <span>
          <MessageOutlined /> 讨论区
        </span>
      ),
      children: <CourseDiscussion />,
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Space direction="vertical" style={{ width: "100%" }}>
        <Title level={2}>{courseInfo.name}</Title>
        <Tabs items={items} />
      </Space>
    </div>
  );
};

export default CourseDetail;
